<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="params.villageName" placeholder="请输入所属项目名称" maxlength="50" />
            <!-- <el-input v-model="params.merchantName" placeholder="请输入楼栋名称" /> -->
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom"  @click="reset()"><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="楼宇管理列表">
            <!-- <template #actions>
                <el-button >导出数据</el-button>
                <el-button type="primary" size="small" @click="addProject">添加项目分期</el-button>
            </template> -->
             <el-table
                class="table"
                :data="tableData"
                style="width: 100%;margin-bottom:20px; background:#F4F4F4;color:#909399;font-size: 14px;line-height: 22px; "
                row-key="row-id"
                size="small"
                lazy
                :load="load"
                :tree-props="{children: 'children', hasChildren: 'childType'}">
                <el-table-column :show-overflow-tooltip="true" label="项目分期/楼栋/单元" :formatter="nameForRow"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="count" label="户数"></el-table-column>
        </el-table>
        </PageCard>
    </Page>
</template>
<script>
import EdDialog from 'src/components/EdDialog.vue'
import EdCascader from 'src/components/EdCascader.vue'
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import { defineComponent } from 'vue'
import {productList} from "./api.js";
export default defineComponent({
    name: 'building',
    components: { Page, PageCard, ApiTable,EdCascader,EdDialog },
    data() {
        return {
            params:{
                id:"",
                type:"village",
                villageName:''
            },
            tableData: []
        }
    },
    mounted(){       
        this.listTable()
    },
    methods: {
        nameForRow(row) {
            switch (row.type) {
                case 'village':
                    return row.name+'期'
                case 'building':
                    return row.name + '栋'
                case 'unit':
                    return row.name+'单元'
                case 'room':
                    return row.name+'室'
                default:
                    return row.name
            }
    
        },
        listTable() {
            productList(this.params).then(response => {
                if(response.success) {
                    response.data.forEach(item => {
                        item['row-id'] = item.id
                    });
                    this.tableData=response.data
                }
            })
        },
        // tableApi:productList,
        load(tree, treeNode, resolve) {
            // console.log(tree);
            // console.log(treeNode);
            productList({id:tree.id, type:tree.childType}).then(response => {
                if(response.success) {
                    response.data.forEach(item => {
                        item['row-id'] = tree['row-id'] + item.id
                    })
                    this.sortData(response.data)
                    resolve(response.data)
                }
            })
        },
        search(){
            this.listTable()
        },
        reset(){
            this.params = {
                id:"",
                type:"village",
                villageName:''
            }
            this.listTable()
        },
        sortData(data){
            data.sort((a,b)=>{
                const numa = parseFloat(a.name)
                const numb = parseFloat(b.name)
                if (isNaN(numa) || isNaN(numb)) {
                    return a.name.localeCompare(b.name)
                }else {
                    return numa - numb
                }
            })
        }
    }
})
</script>

<style lang="scss" scoped>

.el-table {
  border-radius: 8px 8px 0 0;
  margin-bottom: 16px;
}

:deep .el-table thead tr th {
  background: #EEF2F9;
  color: #909399;
}

:deep .el-table tbody tr td {
  color: #606266;
}

:deep .api-table .el-table tbody tr:hover td {
  background-color: #F4F8FF;
}

.el-pagination {
  display: flex;
  padding: 8px;
}

:deep .el-pagination .el-pagination__sizes {
  margin-right: auto;
}
 :deep .table {
        border-radius: 8px 8px 0 0;
        margin-bottom: 16px;
        
        thead tr th {
            background: #F4F4F4;
            color: #909399;
            height: 50px;
        }

        tbody tr {
            background: #FBFBFB;
            td {
                color: #606266;
            }
        }

        tbody tr:hover td{
            /* background-color: #FEF9F0; */
            background-color: #FEF9F0 !important;
        }
    }
</style>